<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D图形转换</title>
    <style>
        body>div{
            width: 500px;
            height: 500px;
            background-color: rebeccapurple;
            /*skew:倾斜*/
            /*transform: skew(45deg,0deg);*/
        }
        body>div>div{
            width: 300px;
            height: 300px;
            background-color: green;
            /*translate(x,y)，平移*/
            transform: translate(100px,100px);
        }
        body>div>div>div{
            width: 300px;
            height: 300px;
            background-color: yellow;
            /*角度的单位：deg*/
            transform: rotate(45deg);
            /*origin:原点，起始点*/
            /*transform-origin：x y，设置图形转换的参考点。
            默认是图形自身的中心点（center center）*/
            transform-origin: 50% 50%;
        }
        body>div>div>div>div{
            width: 100px;
            height: 100px;
            background-color: pink;

            transform-origin: 0% 0%;
            /*既放大，又平移*/
            transform: translate(50px,50px) scale(2);
            /*matrix:矩阵*/
            /*transform: matrix(2,0,0,2,50,50)*/
           
        }
    </style>
</head>
<body>
    <!--
        通过transform（转换，转变）属性 实现2D图形转换，
        是在平面坐标系查下，基于x轴，y轴对图形进行：
        平移 ：translate（）
        旋转 ：rotate（）
        缩放 ：scale（）
        倾斜 ：skew（）
    -->
    <div>
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
</body>
</html>